import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import video from './assets/video'
import "./assets/css/common.css"
import "@/assets/css/el-reset.css"
import qfSubMenu from "qf-sub-menu" //引入我们的组件
//进度条
import nprogress from "nprogress"
import 'nprogress/nprogress.css'

//引入bus
import bus from './utils/bus'

//将eventbus添加到vue构造函数的原型，这样做的目的就是为了让所有的子组件都能拿到$bus
Vue.prototype.$bus = bus


//使用Vue.use()将组件注入到所有的子组件
Vue.use(qfSubMenu)


//路由守卫

router.beforeEach((to,from,next)=>{
   //把进度条打开
   nprogress.start()

  //1 判断本地储存中是否存在token  如果有就放行  如果没有那就让他从新回到登录页
  let token = localStorage.getItem('wf-token');
  if(token){
    if(store.state.userMenu.length === 0){
      //用户的路由信息(菜单信息没有了)，需要重新发送
      store.dispatch('FETCH_MENULIST')
      .then(()=>{
        //重新激活动态添加的路由  replace:true 不产生历史记录
        next({...to,replace:true})
      })
    }else{
      next()
    }
  
  }else{
    //2 如果用户没有登入 就不能访问登入页面以外的页面
    // 如果用户访问的路径是login 那么就放行
    if(to.path === "/login"){
      next()
    }else{
      //如果不是login就拦截  并且跳转到login页
      next({path:'/login'})
    }
  }
})

//全局后置钩子 afterEach中停止进度条

router.afterEach((to,from,next)=>{ //已经进入页面了
  //停止进度条
  nprogress.done()

  let matched = [...to.matched]
  // matched.splice(0,1)
  console.log(matched);
  store.commit("SET_BREADCRUMB",matched)
})

//引入公共样式
import "./assets/css/common.css"
Vue.use(ElementUI);
// Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
